<template>
  <transition>
    <div class="repair-order-list">
      <section class="app-main">
        <div class="app-fixed-top">
          <div class="search-content">
            <mt-field label="" placeholder="可输入商品名称/商品编号/订单号查询" v-model="searchValue" @keyup.enter.native="handleSelectCode">
              <span class="iconfont icon-search" @click="handleSelectCode"></span>
            </mt-field>
          </div>
          <mt-navbar v-model="selected">
            <mt-tab-item id="3900">
            <span class="tab-item-content">预约中
              <span class="count" v-if="resCount.waitCount!==0">
                <template v-if="resCount.waitCount<100">{{resCount.waitCount}}</template>
                <span class="count-tips" v-else>...</span>
              </span>
            </span>
            </mt-tab-item>
            <mt-tab-item id="3901">
            <span class="tab-item-content">待付款
              <span class="count" v-if="resCount.payCount!==0">
              <template v-if="resCount.payCount<100">{{resCount.payCount}}</template>
              <span class="count-tips" v-else>...</span>
              </span>
            </span>
          </mt-tab-item>
            <mt-tab-item id="3902">
            <span class="tab-item-content">已派工
              <span class="count" v-if="resCount.allotCount!==0">{{resCount.allotCount}}</span>
            </span>
            </mt-tab-item>
            <mt-tab-item id="3903">
            <span class="tab-item-content">维修中
              <span class="count" v-if="resCount.repairCount!==0">{{resCount.repairCount}}</span>
            </span>
            </mt-tab-item>
            <mt-tab-item id="3904"><span class="tab-item-content">已完成</span>
            </mt-tab-item>
            <mt-tab-item id="3905"><span class="tab-item-content">已取消</span></mt-tab-item>
          </mt-navbar>
        </div>
        <!-- tab-container -->
        <div class="tab-body xunjia-list">
          <ul class="tab-list"
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10">
            <li class="item" v-for="item in enquiryList">
              <div class="item-header">
                <template v-if="!item.allotShopName">{{item.allotShopName}}</template>
                <div class="item-sn">{{item.sn}}</div>
                <!--<span class="item-state ">{{item.storeAllotStatusDesc}}</span>-->
              </div>
              <dl class="item-body" @click="handleDetails(item.bookId)">
                <dd v-if="selected==3900">
                  <span class="item-addon">预约时间：</span>
                  <template v-if="item.bookTimeStart">{{(item.bookTimeStart).split(' ')[0]}} {{new Date(item.bookTimeStart).getHours()}}:00~{{new Date(item.bookTimeEnd).getHours()}}:00</template>
                </dd>
                <!--<dd v-if="selected==3901">-->
                  <!--<span class="item-addon">确认时间：</span>-->
                  <!--{{item.confirmDate}}-->
                <!--</dd>-->
                <!--<dd v-if="selected==3902">-->
                  <!--<span class="item-addon">维修时间：</span>-->
                  <!--{{item.updateTime}}-->
                <!--</dd>-->
                <dd v-if="selected==3904">
                  <span class="item-addon">完成时间：</span>
                  {{item.updateTime}}
                </dd>
                <dd v-if="selected==3905">
                  <span class="item-addon">取消时间：</span>
                  {{item.cancelDate}}
                </dd>
                <dd><span class="item-addon">服务项目：</span>
                  <span class="item-content" v-if="item.items.length>0">
                    <div class="" v-for="product in item.items">{{product.commattribName}}</div>
                </span>
                 <span class="item-content" v-else>
                    {{item.carModel}}
                </span>
                </dd>
                <dd><span class="item-addon">服务方式：</span>
                  <span class="item-content">{{item.serviceTypeDesc}}</span>
                </dd>
              </dl>
              <div class="item-footer">
                <mt-button type="danger" @click="handleDetails(item.bookId)">查看详情</mt-button>
              </div>
            </li>
          </ul>
          <div class="line-scale-pulse-out" v-show="loading">
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
          </div>
          <div class="module-none" v-if="showNone">
            暂无订单信息！
          </div>
        </div>
      </section>

    </div>
  </transition>
</template>

<script>
  import { Navbar, TabItem,TabContainer, TabContainerItem,Button,Radio,Toast,Indicator} from 'mint-ui';
  export default {
    data () {
      return {
        selected:'',
        res:'',
        resCount:'',
        showNone:false,
        loading:false,
        loadTips:false,
        page:1,
        pageSize:10,
        orderByField:'',
        enquiryList:[],
        popupFilterShow:false,
        searchValue:'',
      }
    },
    /**进入路由前判断**/
//    beforeRouteEnter (to, from, next) {
//      next(vm => {
//        if(from.query.stateId!==undefined){
//        vm.selected=from.query.stateId;
//      }else{
//        vm.selected='0';
//      }
//    })
//    },
    watch:{
      'selected'(val){

        this.getCountFlag();
        this.page=1;
        Indicator.open({
          text: '加载中...',
          spinnerType: 'snake'
        });
        //    获取接单列表
        var params = new URLSearchParams();
        params.append('pageNo',this.page);
        params.append('pageSize',this.pageSize);
        params.append('form.bookStatus',val);
        this.$axios({
          method: 'post',
          url:'gp/bu/bookingOrderApp!getBookingOrderList.do',
          data:params
        }).then((res)=>{
//          if(res.data.statusCode==200){
          Indicator.close();
          this.res = res.data;
          this.enquiryList = res.data.rows
          this.total=res.data.total;
          if(this.enquiryList.length<=0){
            this.showNone=true;
          }else{
            this.showNone=false;
          }
//        }else{
//          Toast({
//            message: res.data.message,
//            position: 'middle',
//            duration:800
//          });
//          Indicator.close();
//        }
      });
      },
    },
    mounted(){
      this.getCountFlag();
      this.selected='3900'
      if(this.$route.query.stateId){
        this.selected=this.$route.query.stateId;
      }else{
        this.selected='3900'
      };
    },
    methods:{
      loadMore() {
        if(this.total==0){
          return false;
        }
        if(this.enquiryList.length<this.total){
          this.loading = true;
          this.page++;
          var params = new URLSearchParams();
          params.append('pageNo',this.page);
          params.append('pageSize',this.pageSize);
          params.append('form.bookStatus',this.selected);
          this.$axios({
            method: 'post',
            url:'gp/bu/bookingOrderApp!getBookingOrderList.do',
            data:params
          }).then((res)=> {
            for(var i=0;i<res.data.rows.length;i++){
            this.enquiryList.push(res.data.rows[i]);
          }
        });
          setTimeout(() => {
            this.loading = false;
        },1000);
        }else{
          this.loadTips=true;
        }

      },
      handleSelectCode(){},
      handleDetails(bookId){
        this.$router.push({path:'/report-order-details',query: {id:bookId,stateId:this.selected}})
      },
      handleFilter(){
        this.popupFilterShow=true
      },
      getCountFlag(){
        this.page=1;
        var params = new URLSearchParams();
        this.$axios({
          method: 'post',
          url:'gp/bu/bookingOrderApp!getBookingOrderListHead.do',
          data:params
        }).then((res)=>{
          this.resCount=res.data.extraObj
      });
      },
      handleSure(){
        this.getCountFlag();
        this.page=1;
        var params = new URLSearchParams();
        params.append('countFlag',0);
        params.append('inquiryStatusMult',this.selected);
        if(this.selected=='0'){
          this.orderByField='modifyDate'
        }
        if(this.selected=='1'){
          this.orderByField='allotDate';
          params.append('dateProp','allotDate');
        }
        if(this.selected=='2'){
          this.orderByField='receiveDate'
        }
        if(this.selected=='4'){
          this.orderByField='finishDate'
        }
        if(this.selected=='6'){
          this.orderByField='cancelDate'
        }
        if(this.selected=='7'){
//          params.append('controllerCenterStatus',7);
        }
        params.append('currPage',this.page);
        params.append('pageSize',this.pageSize);
        this.$axios({
          method: 'post',
          url:'gp/bu/bookingOrderApp!getBookingOrderList.do',
          data:params
        }).then((res)=>{
          console.log(res)
        Toast({
          message: '筛选成功',
          position: 'middle',
          duration:800
        });
        this.popupFilterShow=false;
        this.res=res.data.object;
        this.enquiryList=res.data.object.demands;
        this.total=res.data.object.totalCount;
      });
      }
    }
  }
</script>

<style src="../../../static/app-repair.css"></style>

<style>
  .repair-order-list .search-content{
    overflow: auto;
    padding:12px 16px;
    text-align: center;
    z-index: 100;
    border-bottom:1px solid #eee;
  }
  .repair-order-list .search-content .mint-cell-wrapper{
    padding:2px 10px;
  }
  .repair-order-list .search-content .mint-cell{
    border: 1px solid #ddd;
    border-radius:20px;
    padding:0 6px;
    min-height: inherit;
  }
  .repair-order-list .search-content .mint-cell .mint-field-core{
    height: 30px;
    font-size: 14px;
  }
  .repair-order-list .search-content  .icon-search{
    padding-left: 12px;
    font-size: 20px;

  }
</style>
